//1、楼层导航
//获取距离上方偏移量
var mainoffset = $('.mainww').offset().top;
console.log(mainoffset);
$(window).scroll(function () {
    if ($(this).scrollTop() >= mainoffset) {
        $('.sidebar').fadeIn(600);
    } else {
        $('.sidebar').fadeOut(600);
    };
    //每次滚动的距离都对所有元素判断
    $('.mainwwx').each(function (index, value) {
        if ($(window).scrollTop() >= value.offsetTop) {
            $('.item').eq(index).addClass('active').siblings().removeClass('active');
        }
    });
});


$('.item').click(function () {
    // $(this).addClass('active').siblings().removeClass('active');
    var indexValue = $(this).index();
    console.log(indexValue);
    // console.log($('.main4ww').eq(indexValue).offset().top);
    var topValue = $('.mainwwx').eq(indexValue).offset().top;
    //回到设置位置
    $('html').animate({
        scrollTop: topValue
    }, 800);
});


//2、回到顶部
var topoffset = $('.mainww').offset().top;
console.log(topoffset);
$(window).scroll(function () {
    if ($(this).scrollTop() >= topoffset) {
        $('#top').fadeIn(600);
    } else {
        $('#top').fadeOut(600);
    }
});
// 绑定点击事件回到顶部
$('#top').click(function () {
    console.log('点击');
    // html的scrollTop=0回到顶部
    $('html').animate({
        scrollTop: 0
    }, 500);
});


//3、品牌旗舰部分左右移动
var flag = 1;
$('.butRight').click(function () {
    if (flag == 1) {
        console.log($('.butRight'));
        $('.butul').css('left', '-1110px');
        flag = 2;
    } else if (flag == 2) {
        $('.butul').css('left', '0px');
        flag = 1;
    }
});
var count = 1;
$('.butLeft').click(function () {
    if (count == 1) {
        console.log($('.butLeft'));
        $('.butul').css('left', '-1110px');
        count = 2;
    } else if (count == 2) {
        $('.butul').css('left', '0px');
        count = 1;
    }
});





//3、tab切换
// $('.ulli li').click(function () {
//     $(this).eq(index).addClass('on').siblings().removeClass('on');
// })






//4、 数据渲染
$.getJSON('../mock/xiexue.json', function (data) {
    console.log(data);
    //初始化页面
    console.log(data[0].jinri[0]);
    showPage(data[0].jinri[0]);

});

var pageDatas = '';

function showPage(data) {
    console.log(data);
    for (var i = 0; i < data.length; i++) {
        pageDatas += `
        <li class="num">
        <div class="p-img2">
            <a href="">
            <img src="${data[i].good_urls.nowurl}" alt=""></a>
        </div>
        <div class="p-name2">
            <a href="">${data[i].goods_title}</a>
        </div>
        <div class="p-price2">${data[i].goods_price}</div>
    </li>`;
    };
    $('.clearfix').html(pageDatas)
};





//渲染2
// $.getJSON('../mock/xiexue.json', function (data) {
//     console.log(data);
//     //初始化页面
//     console.log(data[1].xinpin[0]);
//     showPage2(data[1].xinpin[0]);

// });

// var pageDatas = '';

// function showPage2(data) {
//     console.log(data);
//     for (var i = 0; i < data.length; i++) {
//         pageDatas += `
//         <li class="num">
//         <div class="p-img2">
//             <a href="">
//             <img src="${data[i].good_urls.nowurl}" alt=""></a>
//         </div>
//         <div class="p-name2">
//             <a href="">${data[i].goods_title}</a>
//         </div>
//         <div class="p-price2">${data[i].goods_price}</div>
//     </li>`;
//     };
//     $('.clearfixes').html(pageDatas)
// };


// var hid = document.getElementsByClassName('hid');
// var bd = document.getElementsByTagName('bd');
// //排他
// //封装成函数
// function moveFun() {
//     for (var i = 0; i < hid.length; i++) {
//         //恢复默认样式
//         hid[i].className = '';
//         bd[i].className = 'bd';
//     }
// }
// //绑定事件
// for (var j = 0; j < hid.length; j++) {
//     hid[j].index = j;
//     hid[j].onmouseover = function () {
//         moveFun();
//         this.className = 'on';
//         bd[this.index].className = 'bd show'
//     }
// }
// var hid = document.querySelectorAll('.hid');
// var bd = document.querySelectorAll('.bd');
// function page() {
//     for (var i = 0; i < hid.length; i++) {
//         hid[i].className = 'hid';
//         hd[i].className = 'bd';
//     }
// };
// for (j = 0; j < hid.length; j++) {
//     hid[j].index = j;

//     hid[j].onmouseover = function () {
//         page();
//         this.className = 'hid on';
//         bd[this.index].className = 'bd show';
//     }
// hid[j].onmouseout = function () {
// page();
// this.className = 'hid on';
// bd[this.index].className = 'bd show'
// }
// }
$('.hid').mouseover(function () {
    console.log(1);
    console.log($(this));
    $(this).addClass('on').siblings().removeClass('on');
    $('.bd').eq($(this).index()).addClass('show').siblings().removeClass('show');
})
